<template>
  <div class="index-home">
    <div class="top">
      <div>
        <h1>不飞溅</h1>
        <div>
          <h4>互联网上可免费使用的图像的来源 
            <!-- <a href="">可免费使用的图像的来源</a> -->
            </h4>
          <p>由各地的创作者提供支持</p>
        </div>
        <index-search key="home"></index-search>
        <div>
          <span>趋势:</span>
          <ul>
            <li ><a @click="sh('秋日')">秋日</a></li>
            <li ><a @click="sh('时尚')">时尚</a></li>
            <li> <a @click="sh('生活')">生活</a></li>
            <li ><a @click="sh('少女')">少女</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bom">
      <div>
        <a href="" style="cursor: zoom-in" >当天的图片 &nbsp;</a>
        由
        <span href=""
          >
          <!-- <a @mouseover="showpersonbox(0)" @mouseout="delpersonbox">JW党</a>
          <div
            class="personbox"
            @mouseover="showpersonbox(1)"
            @mouseout="delpersonbox"
            v-if="isPersonBox"
          > -->
           <a >JW党</a>
          <div
            class="personbox"
            v-if="isPersonBox"
          >
            <!-- <div class="top">
              <router-link to="/personal">
                <img src="~@/assets/Index/img/test.jpg" alt="" />
                <div>
                  <p>姓名</p>
                  <p>賬號</p>
                </div>
              </router-link>
            </div> -->
            <div class="center">
              <a href="">
                <img src="~@/assets/Index/img/test.jpg" alt="" />
                <img src="~@/assets/Index/img/test.jpg" alt="" />
                <img src="~@/assets/Index/img/test.jpg" alt="" />
              </a>
            </div>
            <div class="bom">
              <router-link to="/login"><button >跟隨</button></router-link>
            </div>
          </div>
        </span>
      </div>
      <div>
        阅读有关
        <a >许可证的更多信息</a>
      </div>
      <div>
        <img
          src="https://images.unsplash.com/file-1593474834382-661b072d9ec8image"
          alt=""
        />
        <a >创建网站所需的一切</a>
      </div>
    </div>
  </div>
</template>

<script>
import indexSearch from "@/components/indexCom/index-search.vue";

export default {
  data() {
    return {
      isPersonBox: false,
      showtimeout: "",
      deltimeout: "",
    };
  },
  components: {
    indexSearch,
  },
  methods: {
    sh(a){
this.$bus.$emit("sh",{a})
    },
    // showpersonbox(a) {
    //   if (a) {
    //     clearTimeout(this.deltimeout);
    //     clearTimeout(this.showtimeout);
    //     this.showtimeout = "";
    //     this.deltimeout = "";
    //     this.isPersonBox = true;
    //   } else {
    //     this.showtimeout == ""
    //       ? (this.showtimeout = setTimeout(() => {
    //           this.isPersonBox = true;
    //         }, 800))
    //       : "";
    //   }
    // },
    // delpersonbox() {
    //   this.deltimeout == ""
    //     ? (this.deltimeout = setTimeout(() => {
    //         this.showtimeout = "";
    //         clearTimeout(this.showtimeout);
    //         this.isPersonBox = false;
    //         clearTimeout(this.deltimeout);
    //         this.deltimeout = "";
    //       }, 300))
    //     : "";
    // },
    
  },

};
</script>

<style>
@import url("~@/assets/Index/css/index-home.css");

@media (max-width: 767px) {
  .index-home .top > div {
    margin: 0px;
  }
  .index-home .top > div h1 {
    font-size: 24px;
  }
  .index-home .top > div > .my-search {
    display: none;
  }
  .index-home .top > div > div:last-child {
    display: none;
  }
  .index-home .bom > div:nth-child(1) {
    display: none;
  }
  .index-home .bom > div:nth-child(2) {
    display: none;
  }
  .index-home .bom > div:nth-child(3) {
    text-align: left;
  }
  .index-home .bom > div:nth-child(3) > img {
    left: 0px;
  }
}
@media (min-width: 768px) {
  .index-home .bom > div:nth-child(2) {
    display: none;
  }
}
@media (min-width: 992px) {
  .index-home .bom > div:nth-child(2) {
    display: inline-block;
  }
}
</style>